<template>
    <div class="face-box content">
      <div class="img">
          <div class="img-box">
            <img class="img-left" src="../../assets/image/user.png" alt="">
            <div class="img-right">
                <span>收手吧阿祖</span>
                <span>电话：13866666666</span>
            </div>
          </div>
      </div>.

      <div class="card-fa">
        <div class="card-son">
            <div class="son-top">
              <span>收益统计(元)</span>
              <span style="color: #6995d2;">更多</span>
            </div>
            <div class="son-bottom">
              <div>
                <i class="iconfont icon-jinrikaoqin"></i>
                <div class="tx">
                  <div class="text-center">
                    <div class="font-size24 font-bold pric">68.00</div>
                  </div>
                </div>
              </div>
              <div>
                <i class="iconfont icon-benzhou"></i>
                <div class="tx">
                  <div class="text-center">
                    <div class="font-size24 font-bold pric">1688.00</div>
                  </div>
                </div>
              </div>
              <div>
                <i class="iconfont icon-benyue"></i>
                <div class="tx">
                  <div class="text-center">
                    <div class="font-size24 font-bold pric">800.00</div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>  
      
      <div class="use">
          <div  @click="gouseInfo" class="use-t">
            <div >账户与安全</div>
            <i class="iconfont icon-jinruyou"></i>
          </div>

          <div class="use-t">
            <div>退出登录</div>
            <i class="iconfont icon-jinruyou"></i>
          </div>

      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      
    };
  },
  mounted() {},
  methods:{
    gouseInfo(){
      this.$router.push("/useInfo")
  }
  }
}
</script>
<style scoped lang="scss">
.content{
  padding: 8px;
}
 .img{
    width: 100%;
    height: 200px; 
    background-color: #6995d2;
    display: flex;
    align-items: center;
    justify-content: center;
    .img-box{
      width: 300px;
      height: 100px;
    }
  }
 .img-box{
  display: flex;
    .img-left{
      width: 100px;
      height: 100px;
      margin-right: 8px;
      border-radius: 50%;
    }
    .img-right{
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      text-align: start;
      color:#fff;
      justify-content: center;
      font-size: 16px;
      gap: 16px;
    
    }
 }

.card-fa{
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  .card-son{
    position: absolute;
    width: 90%;
    top:-50px;
    border-radius: 8px;
    background-color: #e9e9e9;
  }
}
.son-top{
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
.son-bottom{
  border-top:1px solid #dbd6d6 ;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-around;
  i{
    font-size: 48px;
  }
  .tx{
    margin-top: 8px;
    
  }
}
 .use{
  
    width: 100%;
    .use-t{
      height: 48px;
      border-bottom: 1px solid #dbd6d6;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
 }
.use-t:nth-of-type(1){
  border-top: 1px solid #dbd6d6;
}
 .pric{
  color: #6995d2;
  max-width: 100px;
 
 }
</style>